<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,shrink-to-fit=no">
    <meta name=format-detection content="telephone=no">
    <meta name=renderer content=webkit>
    <meta name=description content="">
    <meta name=keywords content="">
    <meta http-equiv=Cache-Control content="no-cache, no-store, must-revalidate">
    <meta http-equiv=Pragma content=no-cache>
    <meta http-equiv=Expires content=0>
    <meta name=renderer content=webkit>
    <meta name=mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=apple-mobile-web-app-title content=创客匠人>
    <meta http-equiv=x-dns-prefetch-control content=on>
    <script src="https://assets.ckjr001.com/axios-v0.15.3.min.js"></script>
    <script src="https://assets.ckjr001.com/jweixin-1.6.0.js"></script>
    <style>
      body{
        background-color: #ffffff;
        color: #333333;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
        padding: 0;
       }
       .content{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        padding-top: 3rem;
        overflow: hidden;
       }
       .bg{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-height: 100%;
        z-index: -1;
       }
       .flex-row-center{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
       }
       .icon-img{
          width: 7.8rem;
          height: 2.1rem;
       }
       .title{
          margin-left: 0.4rem;
          font-size: 1.5rem;
          font-weight: bold;
       }
       .detail{
        font-size: 0.7rem;
        padding: 1.5rem 1.5rem 8rem;
        text-align: center;
       }
       .btn{
        width: 12rem;
        height: 1.6rem;
        border-radius: 0.8rem;
        font-size: 0.65rem;
        border: none;
        margin: 0 auto;
       }
       .login{
          background: #FF6A01;
          color: #ffffff;
       }
       .cancel{
        background-color: #ffffff;
        margin-top: 0.8rem;
        border: 1px solid #CCCCCC;
       }
    </style>
    <script>
      (function (doc, win) {
        //h5手机页面字体自适应
        var docEl = doc.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        var recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth > 640) {
              clientWidth = 640;
            }
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window);
    </script>
</head>

<body>
    <div class="content" >
      <img class="bg" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/32_material_admin/image/img/pc_live_app_login_bg.png" alt="">
      <section class="flex-row-center">
        <img class="icon-img" src="" alt="">
      </section>
      <section class="detail">即将登陆创客匠人直播客户端，请确认是本人操作</section>
      <button id="loginBtn" class="btn flex-row-center login ">立即登录</button>
      <button id="cancelBtn" class="btn flex-row-center cancel ">取消登录</button>

    </div>
    <script>
        var apiUrl = 'https://kpapiop.ckjr001.com';
        if (window.location.host.indexOf('kptest.ckjr001.com') > -1 || window.location.host.indexOf('liveauth.myckjr.com') > -1) {
          apiUrl = 'https://kpapi-cs.ckjr001.com';
        } else if (window.location.host.indexOf('formal.ckjr001') > -1) {
          apiUrl = 'https://formalapi.ckjr001.com'
        }
        var paramObj = {};
        var clicking = false;
        //桌面助手授权登录
        function liveAppLogin(data) {
          var postUrl =  '/api/pcLive/oauthCallback';
          console.log('-----授权流程-----')
          axios.get(apiUrl + postUrl,{
                  params:data
                })
                .then(function (res) {
                  console.log('-----授权流程-成功----',res)
                  if (res.status == 200 && res.data.statusCode == 200) {
                   closeWindow();
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });
        }

        function initAuth(paramObj){
          if(clicking){
            return;
          }
          axios.get(apiUrl + '/api/common/getLiveAuthData').then((res)=>{
              clicking = false;
              const { appid, componentAppid } = res.data.data;
              var backUrl = window.location.href;
              let scope = 'snsapi_userinfo';
              var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(backUrl) + '&response_type=code&scope=' + scope + '&component_appid=' + componentAppid + '#wechat_redirect';
              window.location.replace(url)
          }).catch(e=>{
            alert('登录失败，请刷新页面重试')
          }).finally(()=>{
            clicking = true;
          })
        }

        function closeWindow(isLogin = 1){
          let tipText = isLogin == 1 ? '已登录成功，':'';
          window.navigator.userAgent.indexOf("MicroMessenger") > -1 ? WeixinJSBridge.invoke("closeWindow", {}, (e => {})) : window.alert(tipText + "你可以手动点击返回按钮关闭此页面")
        }
        function initEnv(){
          document.getElementById('loginBtn').addEventListener('click', function () {
              initAuth()
          });
          document.getElementById('cancelBtn').addEventListener('click', function () {
              closeWindow(0)
          });
        }

        window.onload = function () {
            //获取url上带的参数
          var paramStrArr = window.location.href.split('?').length > 1 ? window.location.href.split('?')[1] : [];
          var paramArr = paramStrArr.length > 0 ? paramStrArr.split('&') : [];
          paramObj = {};
          for (var i = 0; i < paramArr.length; i++) {
            let objArr = paramArr[i].split('=');
            paramObj[objArr[0]] = objArr.length > 1 ? objArr[1] : '';
          }
          initEnv();
          if(paramObj.code && paramObj.type == 999){
            let data = {
              "code": paramObj.code,
              "rd": paramObj.rd,
              "ld": paramObj.ld,
              "ex": paramObj.ex,
              "type": paramObj.type,
              "url": window.location.href
            }
            liveAppLogin(data);
            return;
          }
        };
    </script>
</body>

</html>